<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData">
				<view class="box">
					<uni-forms-item required label="姓名" name="customer_name">
						<uni-easyinput type="text" v-model="FormData.customer_name" :clearable="false" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item required label="手机号" name="customer_mobile">
						<uni-easyinput type="number" v-model="FormData.customer_mobile" :clearable="false" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="证件号" name="id_card">
						<uni-easyinput type="idcard" v-model="FormData.id_card" :clearable="false" placeholder="请输入证件号" />
					</uni-forms-item>
				</view>
				<view class="btns" v-if="type == 'edit'">
					<button class="btn" type="primary" @click="edit">确 定</button>
					<button class="btn" type="warn" @click="del">删除此同住人</button>
				</view>
				<view class="btns" v-if="type == 'add'">
					<button class="btn" type="primary" @click="add">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
import { isPhone, isIdCard } from '@/utils/validate';
export default {
	data() {
		return {
			type: 'edit',
			FormData: {
				customer_name: '',
				customer_mobile: '',
				id_card: ''
			},
			rules: {
				customer_mobile: {
					rules: [
						{
							required: true,
							errorMessage: '请填写手机号'
						},
						{
							validateFunction: function (rule, value, data, callback) {
								if (!isPhone(value)) {
									callback('请输入正确的手机号');
								}
								return true;
							}
						}
					],
					validateTrigger: 'submit'
				},
				customer_name: {
					rules: [
						{
							required: true,
							errorMessage: '请填写姓名'
						}
					],
					validateTrigger: 'submit'
				},
				id_card: {
					rules: [
						{
							validateFunction: function (rule, value, data, callback) {
								if (value) {
									if (!isIdCard(value)) {
										callback('请输入正确的身份证号');
									}
									return true;
								} else {
									return true;
								}
							}
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onLoad(e) {
		this.type = e.type;
		if (e.type == 'add') {
			this.FormData.customer_type = 2;
			this.FormData.room_id = e.id;
			this.FormData.rent_sn = e.sn;
		} else if (e.type == 'edit') {
			this.FormData.customer_id = e.id;
			this.FormData.customer_name = e.name;
			this.FormData.customer_mobile = e.mobile;
			this.FormData.id_card = e.idcard;
		}
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
		if (this.type == 'add') {
			uni.setNavigationBarTitle({
				title: '添加同住人'
			});
		} else if (this.type == 'edit') {
			uni.setNavigationBarTitle({
				title: '编辑同住人'
			});
		}
	},
	methods: {
		add() {
			this.$refs.form.validate().then((res) => {
				api.addTogether(this.FormData).then((res) => {
					if (res.data.is_success) {
						uni.showToast({
							title: '添加成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					}
				});
			});
		},
		edit() {
			this.$refs.form.validate().then((res) => {
				api.editTogether(this.FormData).then((res) => {
					if (res.data.is_success) {
						uni.showToast({
							title: '修改成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					}else{
						uni.showToast({
							title: '内容更新失败',
							icon:'none'
						});
					}
				});
			});
		},
		del() {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '确认删除此同住人？',
				success: function (res) {
					if (res.confirm) {
						api.delTogether({ customer_id: _this.FormData.customer_id }).then((res) => {
							if (res.data.is_success) {
								uni.showToast({
									title: '删除成功'
								});
								setTimeout(() => {
									uni.hideToast();
									uni.navigateBack();
								}, 1000);
							}
						});
					}
				}
			});
		}
	}
};
</script>